<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>maptalks-test</title>

<link rel="stylesheet" href="lib/maptalks/css/maptalk.css">
<link rel="stylesheet" href="src/css/common.style.css">

<body>

<div id="map" class="container"></div>

<script type="text/javascript" src="lib/maptalks/js/maptalks.js"></script>
<script type="text/javascript" src="src/const/MapLayerConst.js"></script>
<script type="text/javascript" src="src/config/map-common-config.js"></script>
<script type="text/javascript" src="src/filter/filterPool.js"></script>
<script type="text/javascript" src="src/common/maptalks.common.service.js"></script>

<!--demo start-->


<!--<script type="text/javascript" src="src/01-add-markers.js"></script>-->


<!--<script type="text/javascript" src="src/02-circle-shape-marker.js"></script>-->


<!--<script type="text/javascript" src="src/03-line.js"></script>-->


<!--<script type="text/javascript" src="src/data/heatmap.points.1w.js"></script>
<script type="text/javascript" src="lib/maptalks/js/maptalks.heatmap-by-baidm.js"></script>
<script type="text/javascript" src="src/04-heatmap.js"></script>-->


<!--<script type="text/javascript" src="src/data/markercluster.points.5w.js"></script>-->
<!--<script type="text/javascript" src="lib/maptalks/js/maptalks.markercluster.js"></script>-->
<!--<script type="text/javascript" src="src/05-marker-cluster.js"></script>-->


<!--<script type="text/javascript" src="src/data/animatemarker.js"></script>-->
<!--<script type="text/javascript" src="lib/maptalks/js/maptalks.animatemarker.js"></script>-->
<!--<script type="text/javascript" src="src/06-animate-marker.js"></script>-->


<!--<script type="text/javascript" src="lib/maptalks/js/maptalks.odline.js"></script>-->
<!--<script type="text/javascript" src="src/data/odline-migration.js"></script>-->
<!--<script type="text/javascript" src="src/07-odline-migration.js"></script>-->


<!--<script type="text/javascript" src="lib/maptalks/js/maptalks.odline.js"></script>-->
<!--<script type="text/javascript" src="src/data/odline-geocoord.js"></script>-->
<!--<script type="text/javascript" src="src/data/odline-srcmigration.js"></script>-->
<!--<script type="text/javascript" src="src/08-odline-curves.js"></script>-->


<!--<script type="text/javascript" src="lib/echarts/echarts.min.js"></script>-->
<!--<script type="text/javascript" src="lib/maptalks/js/maptalks.e3.js"></script>-->
<!--<script type="text/javascript" src="src/data/echarts3-lines-bus.js"></script>-->
<!--<script type="text/javascript" src="src/09-echarts-bus.js"></script>-->


<!--<script type="text/javascript" src="lib/echarts/echarts.min.js"></script>-->
<!--<script type="text/javascript" src="lib/maptalks/js/maptalks.e3.js"></script>-->
<!--<script type="text/javascript" src="src/data/echarts3-lines-fly.js"></script>-->
<!--<script type="text/javascript" src="src/10-echarts-fly.js"></script>-->


<!--<script type="text/javascript" src="lib/maptalks/js/maptalks.windylayer.js"></script>-->
<!--<script type="text/javascript" src="src/data/windy.js"></script>-->
<!--<script type="text/javascript" src="src/11-windylayer.js"></script>-->


<!--<script type="text/javascript" src="lib/isects/maptalks.isects.js"></script>-->
<!--<script type="text/javascript" src="src/12-isects.js"></script>-->


<!--<textarea style="width:100%;height:40%;" id="console"></textarea>-->
<!--<script type="text/javascript" src="lib/formats/maptalks.formats.js"></script>-->
<!--<script type="text/javascript" src="src/13-formats.js"></script>-->


<script type="text/javascript" src="lib/jquery/jquery.js"></script>
<script type="text/javascript" src="lib/maptalks/js/maptalks.routeplayer-by-baidm.js"></script>
<script type="text/javascript" src="lib/maptalks/js/maptalks.markercluster.js"></script>
<script type="text/javascript" src="src/data/route.js"></script>
<script type="text/javascript" src="src/14-routeplay.js"></script>
<div class="pane">
    <a href="javascript:play();">Play</a><br />
    <a href="javascript:pause();">Pause</a><br />
    <a href="javascript:cancel();">Cancel</a><br />
    <a href="javascript:finish();">Finish</a><br />
    <a href="javascript:speed(0.5);">0.5X</a><br />
    <a href="javascript:speed(1);">1X</a><br />
    <a href="javascript:speed(2);">2X</a><br />
    <a href="javascript:speed(4);">4X</a><br />
    <span id="info">current info: </span><br />
</div>


<!--<script type="text/javascript" src="lib/jquery/jquery.js"></script>
<script type="text/javascript" src="lib/maptalks/js/maptalks.routeplayer.js"></script>
<script type="text/javascript" src="src/data/route.js"></script>
<script type="text/javascript" src="src/14-routeplay-multi.js"></script>
<div class="pane">
    <a href="javascript:play();">Play</a><br />
    <a href="javascript:pause();">Pause</a><br />
    <a href="javascript:cancel();">Cancel</a><br />
    <a href="javascript:finish();">Finish</a><br />
</div>-->


<!--<link rel="stylesheet" href="src/css/15-right-click-menu.css">-->
<!--<script type="text/javascript" src="src/15-right-click-menu.js"></script>-->


<!--<link rel="stylesheet" href="src/css/16-infoWindow.css">-->
<!--<script type="text/javascript" src="src/16-infoWindow.js"></script>-->


<!--<link rel="stylesheet" href="src/css/16-infoWindow.css">-->
<!--<script type="text/javascript" src="src/17-image-marker.js"></script>-->


<!--<link rel="stylesheet" href="src/css/16-infoWindow.css">-->
<!--<script type="text/javascript" src="src/18-multi-image-marker.js"></script>-->


<!--<script type="text/javascript" src="src/19-vector-marker-fill.js"></script>-->


<!--<script type="text/javascript" src="src/20-line-gradient.js"></script>-->


<!--<script type="text/javascript" src="src/21-rotated-marker-with-line.js"></script>-->


<!--<script type="text/javascript" src="src/22-smoothness-line.js"></script>-->


<!--<script type="text/javascript" src="src/23-polygon.js"></script>-->


<!--<script type="text/javascript" src="src/24-marker-wave.js"></script>-->


<!--<link rel="stylesheet" href="src/css/25-ui-marker.css">-->
<!--<script type="text/javascript" src="src/25-ui-marker.js"></script>-->


<!--<script type="text/javascript" src="lib/echarts/echarts.min.js"></script>-->
<!--<script type="text/javascript" src="src/26-ui-echarts-pie.js"></script>-->


<!--<script type="text/javascript" src="lib/echarts/echarts.min.js"></script>-->
<!--<script type="text/javascript" src="src/data/npmdepgraph.min10..js"></script>-->
<!--<script type="text/javascript" src="src/27-ui-echarts-graph.js"></script>-->


<!--<script type="text/javascript" src="src/28-layer-mask.js"></script>-->


<!--<div class="pane"><a href="javascript:filter();">Select >= 200</a></div>-->
<!--<script type="text/javascript" src="src/29-filter-polygon.js"></script>-->


<!--<div class="pane">-->
<!--    <a href="javascript:sort1();">Sort to 3,2,1</a>-->
<!--    <a href="javascript:sort2();">Sort to 1,2,3</a>-->
<!--</div>-->
<!--<script type="text/javascript" src="src/30-setLayerZIndex.js"></script>-->


<!--<script type="text/javascript" src="src/31-particleLayer.js"></script>-->


<!--<script type="text/javascript" src="src/32-image-layer.js"></script>-->


<!--<script type="text/javascript" src="src/33-magnifier.js"></script>-->


<!--<div class="pane">
    <a href="javascript:playDistance();">play</a>
    <a href="javascript:clearDistance();">clear</a>
</div>
<script type="text/javascript" src="src/34-distanceTool.js"></script>-->

<!--<div class="pane">
    <a href="javascript:playArea();">play</a>
    <a href="javascript:clearArea();">clear</a>
</div>
<script type="text/javascript" src="src/35-areaTool.js"></script>-->

<!--<script type="text/javascript" src="src/36-drawTool.js"></script>-->


<!--<script type="text/javascript" src="src/37-draggabled.js"></script>-->


<!--<div class="pane">-->
<!--    <a href="javascript:startEdit();">Start edit</a>-->
<!--    <a href="javascript:endEdit();">End edit</a>-->
<!--</div>-->
<!--<script type="text/javascript" src="src/38-editabled.js"></script>-->


<!--<div class="pane"><a href="javascript:replay();">Replay</a></div>-->
<!--<script type="text/javascript" src="src/39-marker-animation.js"></script>-->


<!--<div class="pane">
    <a href="javascript:lineReplay();">lineReplay</a>
    <a href="javascript:markerReplay();">markerReplay</a>
</div>
<script type="text/javascript" src="src/40-line-animation.js"></script>-->


<!--<div class="pane"><a href="javascript:replay();">Replay</a></div>-->
<!--<script type="text/javascript" src="src/41-polygon-animation.js"></script>-->


<!--<script type="text/javascript" src="src/42-custom-animation.js"></script>-->

<!--<link rel="stylesheet" href="src/css/43-fullScreen.css">
<button class="full-screen-bar" onclick="fullScreen()">全屏</button>
<script type="text/javascript" src="src/43-fullScreen.js"></script>-->

<!--demo end-->

</body>
</html>
